<template>
  <div class="psychological-container">
    <!-- 顶部横幅 -->
    <div class="hero-banner">
      <div class="banner-content">
        <h1 class="title">心理健康关爱热线</h1>
        <p class="slogan">倾听心声，温暖相伴</p>
        <div class="hotline-card">
          <el-icon class="phone-icon"><PhoneFilled /></el-icon>
          <div class="number">400-XXX-XXX</div>
          <div class="time">7×24小时专业服务</div>
        </div>
      </div>
    </div>

    <!-- 核心服务展示 -->
    <el-row :gutter="30" class="service-section">
      <el-col :md="12" class="left-panel">
        <el-card class="service-card">
          <template #header>
            <div class="card-header">
              <el-icon><ChatLineRound /></el-icon>
              <span>我们的服务</span>
            </div>
          </template>
          <div class="service-list">
            <div class="service-item">
              <el-tag type="success" effect="plain" class="service-tag">情绪疏导</el-tag>
              <p>工作压力、人际关系、情绪管理等咨询</p>
            </div>
            <el-divider />
            <div class="service-item">
              <el-tag type="warning" effect="plain" class="service-tag">危机干预</el-tag>
              <p>紧急心理援助与危机情况处理</p>
            </div>
            <el-divider />
            <div class="service-item">
              <el-tag type="info" effect="plain" class="service-tag">成长辅导</el-tag>
              <p>个人成长、职业规划、自我探索</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :md="12" class="right-panel">
        <el-card class="quote-card">
          <div class="quote-content">
            <el-icon class="quote-icon"><Comment /></el-icon>
            <el-carousel height="200px" direction="vertical" :interval="5000">
              <el-carousel-item v-for="(item, index) in quotes" :key="index">
                <h3 class="quote-text">{{ item.text }}</h3>
                <p class="quote-author">—— {{ item.author }}</p>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部紧急求助 -->
    <div class="emergency-section">
      <el-alert type="error" title="紧急求助" :closable="false" show-icon>
        <p>如遇紧急情况，请立即拨打 110 或前往就近医疗机构</p>
      </el-alert>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {
  PhoneFilled,
  ChatLineRound,
  Comment
} from '@element-plus/icons-vue'

const quotes = ref([
  {
    text: '心理健康是人生幸福的基石',
    author: '卡尔·荣格'
  },
  {
    text: '自我关怀是生命最好的礼物',
    author: '克里斯汀·内夫'
  },
  {
    text: '疗愈从被倾听开始',
    author: '欧文·亚隆'
  }
])

</script>

<style scoped lang="scss">
.psychological-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .hero-banner {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
    text-align: center;

    .title {
      color: #2c3e50;
      font-size: 32px;
      margin-bottom: 10px;
    }

    .slogan {
      color: #666;
      font-size: 18px;
      margin-bottom: 20px;
    }

    .hotline-card {
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 12px;
      display: inline-block;

      .phone-icon {
        color: #409eff;
        font-size: 36px;
        margin-bottom: 10px;
      }

      .number {
        font-size: 28px;
        color: #2c3e50;
        font-weight: bold;
        margin: 10px 0;
      }

      .time {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .service-section {
    margin-bottom: 30px;

    .service-card {
      .card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
      }

      .service-list {
        .service-item {
          padding: 15px 0;

          .service-tag {
            margin-bottom: 10px;
          }

          p {
            color: #666;
            margin: 0;
          }
        }
      }
    }

    .quote-card {
      height: 100%;

      .quote-content {
        padding: 20px;
        text-align: center;

        .quote-icon {
          font-size: 32px;
          color: #67C23A;
          margin-bottom: 15px;
        }

        .quote-text {
          font-size: 18px;
          color: #2c3e50;
          line-height: 1.6;
          margin-bottom: 10px;
        }

        .quote-author {
          color: #666;
          font-style: italic;
        }
      }
    }
  }

  .consultant-section {
    margin-bottom: 30px;

    .section-title {
      font-size: 20px;
      color: #2c3e50;
    }

    .consultant-card {
      text-align: center;
      padding: 20px;

      h4 {
        margin: 10px 0 5px;
      }

      .title {
        color: #409EFF;
        font-size: 14px;
      }

      .expertise {
        color: #666;
        font-size: 13px;
      }
    }
  }

  .emergency-section {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%;

    // 如果需要限制宽度可以添加：
    // max-width: 800px;
    // margin-left: auto;
    // margin-right: auto;

    .el-alert {
      width: fit-content; // 根据内容自适应宽度
      padding: 15px 30px;
      border-radius: 25px;
      // 添加警示图标动画
      .el-alert__icon {
        animation: pulse 1.5s infinite;
      }

      // 警示文字强化
      .el-alert__title {
        font-size: 16px;
        color: #c45656;
      }// 添加圆角效果
    }
  }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@media (max-width: 768px) {
  .psychological-container {
    padding: 10px;

    .hero-banner {
      padding: 20px;

      .title {
        font-size: 24px;
      }

      .hotline-card .number {
        font-size: 22px;
      }
    }
  }
}
</style>
